<!DOCTYPE html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<title>学会详情</title>
	<link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/common.css" />
		<link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui-pull-refresh.css" />

    <style>
    	html, body {width: 100%;min-height: 100%;background: #fff;}
    	.h20 {height: 0.5rem;background: #f0f0f0;}

		.xsTab {
			position: relative;
			z-index: 3;
		}
    .xsTab .aui-tab-item {
      border: none;
      position: relative;
      color: #999;
    }
    .xsTab .aui-tab-item:after {
      content: '';
      display: block;
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      width: 50%;
      height: 2px;
      background: #fff;
      margin: auto;
    }
    .xsTab .aui-tab-item.aui-active {
      color: #2997e4;
    }
    .xsTab .aui-tab-item.aui-active:after {
      background: #2997e4;
    }
    .cxContent > div {
      display: none;
    }
    .xhjj {
      padding: 0.75rem;
    }
    .xhjj p {
      text-indent: 2em;
      font-size: 0.75rem;
			line-height: 1rem;
      margin-bottom: 0.5rem;
      color: #333;
    }
		.xhjj h5 {
      font-size: 0.75rem;
      margin-bottom: 0.5rem;
      color: #333;
    }
		.xhjj h6 {
      font-size: 0.75rem;
      margin-bottom: 1.5rem;
			text-align: right;
      color: #333;
    }
    .xhbreak {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 2rem;
      line-height: 2rem;
      color: #333;
      font-size: 0.75rem;
      text-align: center;
      background-color: #fff;
    }

		/* 数据 */
		.enshrine .aui-list-item-title {
			color: #333;
			line-height: 1rem;
			font-size: 0.75rem;
		}
		.enshrine .aui-info-item {
				color: #999;
				font-size: 0.6rem;
		}
		.enshrine .aui-list-item-media {
			width: 6.5rem;
		}
    .aui-list .registration_txtBot {
      color: #2997e4;
			font-size: 0.6rem;
    }
		.hdxx .aui-media-list .aui-list-item-inner {
			display: -webkit-box;
			display: -webkit-flex;
			display: flex;
			-webkit-box-orient: vertical;
			box-orient: vertical;
			-webkit-flex-direction: column;
			flex-direction: column;
			-webkit-box-pack: justify;
			-webkit-justify-content: space-between;
			justify-content: space-between;
			-webkit-box-align: start;
			-webkit-align-items: flex-start;
			align-items: flex-start;
		}
		.zy {
			color: #999;
			font-size: 0.6rem;
		}
		.cyxx .aui-list-item-media {
			width: 4rem;
			height: 100%;
		}
		.itemIco {
			width: 100%;
			height: 4rem;
		}
		.itemHIco {
			width: 3.25rem;
			height: 3.25rem;
			border-radius: 50%;
		}
		.xhjj {
			border-top: 1rem solid #f0f0f0;
		}
		.enshrine ,.cyxxBox {
			min-height: calc(100vh - 65px);
		}

    </style>
</head>
<body>
<div id="app" v-cloak>
  <div class="aui-tab xsTab" id="xsTab">
    <div class="aui-tab-item aui-active">学会简介</div>
    <div class="aui-tab-item" @click="open_xl2()">活动信息</div>
    <div class="aui-tab-item" @click="open_xl1()">会员信息</div>
  </div>

  <div class="cxContent" id="cxContent">
    <div class="xsBox xhjj" style="display: block;">

      <div v-html="info.content"></div>

      <div class="xhbreak" @click="xhbreak(id,token)">
        退出学会
      </div>
    </div>
    <div class="xsBox hdxx">
			<section class="aui-refresh-content hdxxBox">

				  <div class="h20"></div>
			<div class="aui-content enshrine">
	        <ul class="aui-list aui-media-list">
	            <li class="aui-list-item" tapmode="presshover" @click="openNewWindow('activitydetails','活动详情', item.id)" v-for="item in newsList">
	                <div class="aui-media-list-item-inner">
	                    <div class="aui-list-item-media">
	                        <!-- <img :src="item.images"> -->
													<div v-if="item.images" class="itemIco" :style="'background: url('+ item.images +') center/cover no-repeat'"></div>
	                        <div v-else class="itemIco" style="background: url(../../image/banner2@3x.png) center/cover no-repeat"></div>
	                    </div>
	                    <div class="aui-list-item-inner">
	                        <div class="aui-list-item-text">
	                            <div class="aui-list-item-title">{{item.title}}</div>
	                        </div>
	                        <div class="aui-margin-t-5">
	                            <div class="aui-info-item">{{item.apply_date}}</div>
	                        </div>
	                    </div>
	                </div>
	            </li>
	        </ul>
	    </div>

			</section>
    </div>
    <div class="xsBox cyxx">
			<section class="aui-refresh-content cyxxBox">

				  <div class="h20"></div>
				<div class="aui-content xhList">
				  <ul class="aui-list aui-media-list">
				    <li class="aui-list-item aui-list-item-middle" tapmode="presshover" @click="openNewWindow('detailsinformation','详情资料', item.userid)" v-for="item in newsList2">
				      <div class="aui-media-list-item-inner">
				        <div class="aui-list-item-media">
				          <!-- <img :src="item.head_img" class="aui-img-round aui-list-img-sm"> -->
									<div v-if="item.head_img" class="itemHIco aui-img-round aui-list-img-sm" :style="'background: url('+ item.head_img +') center/cover no-repeat'"></div>
									<div v-else class="itemHIco aui-img-round aui-list-img-sm" style="background: url(../../image/wdr@3x.png) center/cover no-repeat"></div>
				        </div>
				        <div class="aui-list-item-inner">
									<div class="aui-list-item-title aui-font-size-14">{{item.nickname}}</div>
									<div class="zy">{{item.profession}}</div>
				        </div>
				      </div>
				    </li>
				  </ul>
				</div>

			</section>
    </div>
  </div>
</div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/aui-scroll.js"></script>
<script type="text/javascript" src="../../script/utils.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script src="../../script/aui-pull-refresh.js"></script>
<script src="../../script/aui-tab.js"></script>
<script type="text/javascript">
  function goback() {

		  var jsfun = 'window.location.reload()';

		  api.execScript({
		    name: 'mylearn',
		    frameName: 'five_mylearn',
		    script: jsfun
		});
    api.closeWin({name:api.pageParam.name});
  }

	apiready = function() {

			var app = new Vue({
				el: '#app',
				data: {
					id: 0,
					info: '',
					token: '',
					newsList: [],
					newsList2: [],
					page: 1,
	         totalpage: 0,
					page2: 1,
	         totalpage2: 0
				},
				created: function() {
					var $_this = this;
					$_this.token = $api.getStorage('token') || '';
					$_this.id = api.pageParam.id
					api.ajax({
					  url: window.Url.getGroupDetail + $_this.id,
						timeout: 300,
						headers: {
							'baseParams': $api.getStorage('token') //token
						},
					}, function(ret, err) {
					    if (ret) {
					        // api.alert({ msg: JSON.stringify(ret) });
									$_this.info = ret.data
					    } else {
					        api.alert({ msg: JSON.stringify(err) });
					    }
					})
					api.ajax({
					  url: window.Url.getActivity + $_this.id + '/' + $_this.page,
						timeout: 300,
					}, function(ret, err) {
					    if (ret) {
					        // api.alert({ msg: JSON.stringify(ret) });
									if (ret.code == 1) {
										return
									}
									$_this.newsList = ret.data.newsList
					    } else {
					        api.alert({ msg: JSON.stringify(err) });
					    }
					})
					var scroll = new auiScroll({
		          listen:true, //是否监听滚动高度，开启后将实时返回滚动高度
		          distance:40 //判断到达底部的距离，isToBottom为true
		      },function(ret){
		         if (ret.isToBottom) {
		           $_this.page ++
		           if ($_this.page > $_this.totalpage) {
		             $_this.page = $_this.totalpage
		             return
		           }
		           api.ajax({
			 				  url: window.Url.getActivity + $_this.id + '/' + $_this.page,
		            timeout: 300,
		          }, function(ret, err) {
		              if (ret) {
									if (ret.code == 1) {
										return
									}
		                  // api.alert({ msg: JSON.stringify(ret) });
		                  $_this.newsList = $_this.newsList.concat(ret.data.newsList)

		              } else {
		                  api.alert({ msg: JSON.stringify(err) });
		              }
		          })
		         }
		      });
					api.ajax({
					  url: window.Url.getAllGroupUser,
						timeout: 300,
						method: 'post',
						headers: {
						  'Content-Type': 'application/json',
						},
						data: {
	            body: {
								page: $_this.page2,
	              newsId: $_this.id,
	            }
	          }
					}, function(ret, err) {
					    if (ret) {
							if (ret.code == 1) {
								return
							}
					        // api.alert({ msg: JSON.stringify(ret) });
									$_this.newsList2 = ret.data.newsList
					    } else {
					        api.alert({ msg: JSON.stringify(err) });
					    }
					})
					var scroll = new auiScroll({
		          listen:true, //是否监听滚动高度，开启后将实时返回滚动高度
		          distance:40 //判断到达底部的距离，isToBottom为true
		      },function(ret){
		         if (ret.isToBottom) {
		           $_this.page2 ++
		           if ($_this.page2 > $_this.totalpage2) {
		             $_this.page2 = $_this.totalpage2
		             return
		           }
		           api.ajax({
			 				  url: window.Url.getAllGroupUser,
		            timeout: 300,
								method: 'post',
								headers: {
								  'Content-Type': 'application/json',
								},
								data: {
			            body: {
										page: $_this.page2,
			              newsId: $_this.id,
			            }
			          }
		          }, function(ret, err) {
		              if (ret) {
									if (ret.code == 1) {
										return
									}
		                  // api.alert({ msg: JSON.stringify(ret) });
		                  $_this.newsList2 = $_this.newsList2.concat(ret.data.newsList)

		              } else {
		                  api.alert({ msg: JSON.stringify(err) });
		              }
		          })
		         }
		      });
				},
				methods: {
					openNewWindow: function (type, title, id) {
						api.openWin({
							name: type,
							url: './forth_header.html',
							pageParam: {
								name: type,
								title: title,
								id: id
							},
							bounces: false,
							delay:200
						});
					},
					xhbreak: function(id,token) {
						if (window.confirm("是否退出学会?")) {
							api.ajax({
							  url: window.Url.educationalsociety + id,
								headers: {
			              'baseParams': token
			          },
								timeout: 300,
							}, function(ret, err) {
							    if (ret) {
											if(ret.code == 0) {
												api.toast({ msg: '退出学会成功',duration: 2000,location:'middle' });
														goback()
											}else {
												api.toast({ msg: r.message,duration: 2000,location:'middle' });
											}
							    } else {
							        api.alert({ msg: JSON.stringify(err) });
							    }
							})
						} else {

						}

					},
					open_xl1: function() {
							var $_this = this

									var pullRefreshCyxx = new auiPullToRefresh({
											container: document.querySelector('.cyxxBox'),
											triggerDistance: 100
									}, function(ret) {
											if (ret.status == "success") {
												$_this.page2 = 1
												api.ajax({
													url: window.Url.getAllGroupUser,
													timeout: 300,
													method: 'post',
													headers: {
														'Content-Type': 'application/json',
													},
													data: {
														body: {
															page: $_this.page2,
															newsId: $_this.id,
														}
													}
												}, function(ret, err) {
														if (ret) {

																// api.alert({ msg: JSON.stringify(ret) });
																setTimeout(function() {
																	if (ret.code == 1) {
																		pullRefreshCyxx.cancelLoading(); //刷新成功后调用此方法隐藏
																		return
																	}
																	$_this.newsList2 = ret.data.newsList
																	pullRefreshCyxx.cancelLoading(); //刷新成功后调用此方法隐藏
																},500)

														} else {
																api.alert({ msg: JSON.stringify(err) });
														}
												})
											}
									})
					},

					open_xl2: function() {
							var $_this = this

									var pullRefreshHdxx = new auiPullToRefresh({
											container: document.querySelector('.hdxxBox'),
											triggerDistance: 100
									}, function(ret) {
											if (ret.status == "success") {
												$_this.page = 1
												api.ajax({
													url: window.Url.getActivity + $_this.id + '/' + $_this.page,
													timeout: 300,
												}, function(ret, err) {
														if (ret) {
																// api.alert({ msg: JSON.stringify(ret) });
																setTimeout(function() {
																	if (ret.code == 1) {
																	pullRefreshHdxx.cancelLoading(); //刷新成功后调用此方法隐藏
																		return
																	}
																	$_this.newsList = ret.data.newsList
																	pullRefreshHdxx.cancelLoading(); //刷新成功后调用此方法隐藏
																},500)
														} else {
																api.alert({ msg: JSON.stringify(err) });
														}
												})
											}

									})
					}
				},
				mounted: function () {
					var tab = new auiTab({
				    element:document.getElementById("xsTab"),
				    index:1,
				    repeatClick:false
				  },function(ret){
				    var xsBox = document.querySelectorAll('.xsBox')
				    for (var i = 0; i < xsBox.length; i++) {
				      xsBox[i].style.display = 'none'
				    }
				    document.querySelectorAll('.xsBox')[ret.index - 1].style.display = 'block'
				  })
				}
			})
		}

</script>
</html>
